<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="学前端，到达内" fixed>
      <div slot="right" v-if="$store.state.loginname">
        欢迎: {{$store.state.loginname}}
      </div>
      <div slot="right" v-else>
        <router-link to="/register" class="link">注册</router-link>
        &nbsp;
        <router-link to="/login" class="link">登录</router-link>
      </div>
    </mt-header>
    <!-- 导航 -->
    <mt-navbar style="margin-top: 40px" v-model="selected" fixed>
      <mt-tab-item v-for="item in catList" :key="item.id" :id="item.id + ''">
        {{ item.category_name }}
      </mt-tab-item>
    </mt-navbar>
    <!-- 轮播图 -->
    <mt-swipe style="height: 56.2vw; margin-top: 90px">
      <mt-swipe-item>
        <img src="/1.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/2.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/3.jpg" />
      </mt-swipe-item>
    </mt-swipe>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-distance="30"
      :infinite-scroll-immediate-check="true"
    >
      <!-- 引入文章列表项 -->
      <article-item
        @click.native="$router.push(`/article?id=${item.id}`)"
        v-for="item in articleList"
        :key="item.id"
        :article="item"
      >
      </article-item>
      <div style="height: 60px"></div>
    </div>
  </div>
</template>

<script>
import ArticleItem from "@/components/article_item.vue";
import { Indicator } from "mint-ui";

export default {
  components: {
    "article-item": ArticleItem,
  },
  data() {
    return {
      selected: "1",
      catList: [], // 用于存储类别列表
      articleList: [], // 用于存储当前文章列表
      page: 1, // 用于描述当前页码
      isLoading: false, // 表示是否正在加载下一页数据
    };
  },
  activated(){
    // 跳转回当前页时执行, 重新将isLoading改为false,开启触底加载功能
    this.isLoading = false
  },
  deactivated(){
    // 跳转到其他页面时,将isLoading改为true 不执行触底加载
    this.isLoading = true
  },
  mounted() {
    // 加载类别列表
    this.loadCats();

    // 加载UI类别下的首页文章数据
    this.loadArticles(1, 1).then((res) => {
      console.log("UI类别下的首页文章数据", res);
      this.articleList = res.data.results; // 将文章列表存入data.articleList
    });
  },
  methods: {
    /**
     * 加载文章列表, 返回Promise
     */
    loadArticles(cid, page) {
      return new Promise((resolve, reject) => {
        Indicator.open("加载中...");
        this.axios.get(`/articles?cid=${cid}&page=${page}`).then((res) => {
          resolve(res);
          Indicator.close();
        });
      });
    },

    // 当触发触底事件后, 执行loadMore方法
    loadMore() {
      if (this.isLoading) {
        // 如果下一页正在加载中, 则直接返回
        return;
      }
      this.isLoading = true;

      let cid = this.selected; // this.selected即是顶部导航选中项的类别ID
      this.page++; // 下一页需要让data.page自增
      console.log(`到底了, 加载数据 cid:${cid},  page:${this.page}`);
      // 发送http请求, 加载相应页码的数据

      this.loadArticles(cid, this.page).then((res) => {
        console.log("加载下一页,", res);
        // 将返回的文章列表res.data.results 追加到当前列表末尾data.articleList
        this.articleList.push(...res.data.results);
        this.isLoading = false;
        // this.articleList = this.articleList.concat(res.data.results)
      });
    },
    // 自定义方法loadCats, 用于加载类别列表
    loadCats() {
      this.axios.get("/category").then((res) => {
        console.log("加载类别列表:", res);
        this.catList = res.data.results; //将类别列表数组存入data.catList
      });
    },
  },
  watch: {
    // 监听顶部导航选中项的变化,  selected用于表示顶部导航选中项的ID
    selected(newValue, oldValue) {
      // 回到页面顶部
      window.scrollTo(0, 0);
      this.page = 1; // 将当前页码置为1

      // console.log(newValue);  newValue即是当前选中项类别的ID
      this.loadArticles(newValue, 1).then((res) => {
        console.log("点击顶部导航", res);
        this.articleList = res.data.results; // 为articleList重新赋值为新数组
      });
    },
  },
};
</script>
<style scoped>
.link {
  color: #fff;
}
.mint-swipe img {
  width: 100%;
}
</style>